/* ════════════════════════════════════════════════════════════════
   Alpha Finance — Metric Analysis dentro del panel "?"
   Estilos con prefijo lpx-ma- (conviven con learningPanel.css).
   Colores clonados de learning/<métrica>/explicacion.css para que
   el panel se vea igual que la página que sustituye.
   ════════════════════════════════════════════════════════════════ */

/* [hidden] siempre oculta, aunque la clase ponga display:flex (sin esto
   la etiqueta de sector vacía aparecía en métricas sin benchmark) */
.lpx-panel [hidden]{display:none!important}

/* El panel se ensancha cuando el análisis completo está abierto */
.lpx-panel{transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1)}
.lpx-panel.lpx-wide{width:min(740px,96vw)}

/* ── Current Value enriquecido ── */
.lpx-ma-current{display:flex;flex-direction:column;gap:6px}
.lpx-ma-current.is-loading .lpx-valorActualNum,
.lpx-ma-current.is-loading .lpx-valorActualResultNum{color:#b9c6c9}
.lpx-ma-current .lpx-valorActualResultado{margin-top:6px}
.lpx-ma-resultNum{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}

.lpx-ma-sector{
  display:flex;align-items:center;gap:6px;
  padding:5px 10px;margin:4px 0 2px;
  background:rgba(84,140,146,.07);
  border:1px solid rgba(84,140,146,.18);
  border-radius:8px;
  font-size:12px;font-weight:600;color:#548C92;
}
.lpx-ma-sector svg{flex-shrink:0}
.lpx-ma-sectorAvg{margin-left:auto;font-size:11.5px;font-weight:500;color:#777;white-space:nowrap}
.lpx-ma-sectorAvg b{color:#285260}

.lpx-ma-tag{
  font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;
  text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;
}
.lpx-ma-tag--strong{background:#e8f5e9;color:#2e7d32}
.lpx-ma-tag--ok{background:#e3f2fd;color:#1565c0}
.lpx-ma-tag--thin{background:#fff8e1;color:#e65100}
.lpx-ma-tag--risk{background:#fce4ec;color:#c62828}

.lpx-ma-error{margin:6px 0 0;font-size:12px;color:#c62828;line-height:1.45}

/* ── Botón desplegable ── */
.lpx-ma-toggle i{transition:transform .2s ease}
.lpx-ma-toggle.is-open i{transform:rotate(180deg)}
.lpx-ma-toggle:disabled{background:#c8cfd0;cursor:wait;box-shadow:none;transform:none}

/* ── Sección desplegada ── */
.lpx-ma-full{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.lpx-ma-full[hidden]{display:none}
.lpx-ma-block{
  background:#fff;border:1px solid rgba(84,140,146,.12);
  border-radius:12px;padding:14px 16px;
}
.lpx-ma-h{
  margin:0 0 12px;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:#548C92;
  padding-bottom:8px;border-bottom:2px solid #B4D7D8;
}
.lpx-ma-chartWrap{position:relative;height:240px;width:100%}
.lpx-ma-chartWrap canvas{width:100%!important;height:100%!important}

/* Historial: una celda por año */
.lpx-ma-history{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:6px;
}
.lpx-ma-hcell{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 4px;border-radius:9px;background:#f6fbfb;
  border:1px solid rgba(84,140,146,.14);
}
.lpx-ma-hcell.is-ttm{background:#fff;border-color:#548C92}
.lpx-ma-hyear{font-size:11px;font-weight:600;color:#7a8a90;letter-spacing:.03em}
.lpx-ma-hval{font-size:14px;font-weight:800;white-space:nowrap}

/* Sector benchmark */
.lpx-ma-sectorRow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.lpx-ma-sectorLabel{
  display:flex;align-items:center;gap:5px;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#548C92;white-space:nowrap;
}
/* Dropdown propio, estilo Alpha Finance */
.lpx-ma-dd{position:relative;min-width:190px}
.lpx-ma-ddBtn{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  background:#f6fbfb;border:1.5px solid #B4D7D8;border-radius:10px;
  padding:7px 10px 7px 12px;font-size:13px;font-weight:600;color:#285260;
  cursor:pointer;font-family:inherit;text-align:left;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.lpx-ma-ddBtn:hover{border-color:#548C92}
.lpx-ma-ddBtn:focus-visible{outline:none;border-color:#548C92;box-shadow:0 0 0 3px rgba(84,140,146,.12)}
.lpx-ma-dd.is-open .lpx-ma-ddBtn{border-color:#548C92;background:#fff;box-shadow:0 0 0 3px rgba(84,140,146,.12)}
.lpx-ma-ddChev{color:#548C92;flex-shrink:0;transition:transform .2s ease}
.lpx-ma-dd.is-open .lpx-ma-ddChev{transform:rotate(180deg)}
.lpx-ma-ddList{
  position:absolute;top:calc(100% + 6px);left:0;min-width:100%;z-index:20;
  margin:0;padding:6px;list-style:none;
  background:#fff;border:1px solid rgba(84,140,146,.22);border-radius:12px;
  box-shadow:0 12px 32px rgba(40,82,96,.16);
  max-height:280px;overflow-y:auto;
  animation:lpxDdIn .14s ease;
}
.lpx-ma-ddList[hidden]{display:none}
.lpx-ma-ddList::-webkit-scrollbar{width:6px}
.lpx-ma-ddList::-webkit-scrollbar-thumb{background:#B4D7D8;border-radius:10px}
.lpx-ma-ddList li{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 12px;border-radius:8px;
  font-size:13px;font-weight:600;color:#285260;cursor:pointer;white-space:nowrap;
  outline:none;
}
.lpx-ma-ddList li.is-focus{background:rgba(84,140,146,.10)}
.lpx-ma-ddList li[aria-selected="true"]{background:#548C92;color:#fff}
.lpx-ma-ddList li[aria-selected="true"].is-focus{background:#285260}
.lpx-ma-ddList li[aria-selected="true"]::after{
  content:"";width:6px;height:10px;border-right:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(45deg);margin-right:3px;
}
@keyframes lpxDdIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.lpx-ma-bands{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lpx-ma-band{
  position:relative;display:flex;flex-direction:column;gap:2px;
  padding:10px 12px;border-radius:10px;border-left:4px solid transparent;
}
.lpx-ma-band b{font-size:13px;font-weight:700}
.lpx-ma-band span{font-size:12px;opacity:.75}
.lpx-ma-band--strong{background:#e8f5e9;color:#2e7d32;border-left-color:#4caf50}
.lpx-ma-band--ok{background:#e3f2fd;color:#1565c0;border-left-color:#42a5f5}
.lpx-ma-band--thin{background:#fff8e1;color:#e65100;border-left-color:#ffa726}
.lpx-ma-band--risk{background:#fce4ec;color:#c62828;border-left-color:#ef5350}
.lpx-ma-band.is-current{box-shadow:0 0 0 2px currentColor inset}
.lpx-ma-band-you{
  position:absolute;top:8px;right:10px;
  font-style:normal;font-size:11px;font-weight:800;
  padding:2px 7px;border-radius:20px;background:#fff;color:inherit;
}

/* 3 bandas (Altman, Beneish): una fila de 3 en escritorio */
.lpx-ma-bands.lpx-ma-bands--3{grid-template-columns:repeat(3,1fr)}

/* Bloques propios de algunos proveedores (extraHTML) ─────────────
   Desglose clave/valor:
     <div class="lpx-ma-kv"><div class="lpx-ma-kvRow"><span>Label</span><b>Valor</b></div>…</div>
   Sub-título dentro de un bloque:  <p class="lpx-ma-sub">Cost of equity</p>
   Lista de criterios pasa / no pasa (Piotroski):
     <ul class="lpx-ma-check"><li class="is-pass|is-fail"><span class="lpx-ma-checkTxt">Texto</span><b>Valor</b></li>…</ul>
   Nota pequeña:  <p class="lpx-ma-note">…</p>                       */
.lpx-ma-kv{display:flex;flex-direction:column}
.lpx-ma-kvRow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;border-bottom:1px solid rgba(84,140,146,.10)}
.lpx-ma-kvRow:last-child{border-bottom:none}
.lpx-ma-kvRow span{font-size:13px;color:#555}
.lpx-ma-kvRow b{font-size:14px;font-weight:700;color:#285260;white-space:nowrap}
.lpx-ma-kvRow.is-total{border-top:1.5px solid #B4D7D8;border-bottom:none;margin-top:4px;padding-top:9px}
.lpx-ma-kvRow.is-total span{font-weight:700;color:#285260}
.lpx-ma-sub{margin:12px 0 4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8a9aa0}
.lpx-ma-sub:first-child{margin-top:0}
.lpx-ma-note{margin:10px 0 0;font-size:11.5px;color:#8a9aa0;line-height:1.45}
/* Nota "esta página muestra otro valor": visible pero discreta */
.lpx-ma-note--page{padding:8px 10px;border-radius:8px;background:#f6fbfb;border:1px dashed #B4D7D8;color:#5f7479}
[data-ma-toggle] ~ .lpx-ma-note--page, .lpx-caja > .lpx-ma-note--page:first-child{margin:0 0 10px}
.lpx-ma-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.lpx-ma-check li{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;
  background:#f6fbfb;border:1px solid rgba(84,140,146,.14);font-size:13px;color:#444;
}
.lpx-ma-check li::before{
  content:"";flex-shrink:0;width:18px;height:18px;border-radius:50%;
  background:#e0e6e7 center/11px no-repeat;
}
.lpx-ma-check li.is-pass::before{background-color:#2e7d32;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12 10 17 19 7'/%3E%3C/svg%3E")}
.lpx-ma-check li.is-fail::before{background-color:#c62828;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round'%3E%3Cline x1='7' y1='7' x2='17' y2='17'/%3E%3Cline x1='17' y1='7' x2='7' y2='17'/%3E%3C/svg%3E")}
.lpx-ma-checkTxt{flex:1;min-width:0}
.lpx-ma-check b{font-size:13px;color:#285260;white-space:nowrap}

/* Plegables */
.lpx-ma-details{
  border:1px solid rgba(84,140,146,.12);border-radius:12px;background:#fff;
}
.lpx-ma-details summary{
  cursor:pointer;list-style:none;padding:12px 16px;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#548C92;
  display:flex;align-items:center;justify-content:space-between;user-select:none;
}
.lpx-ma-details summary::-webkit-details-marker{display:none}
.lpx-ma-details summary::after{
  content:"";width:8px;height:8px;border-right:2px solid #548C92;border-bottom:2px solid #548C92;
  transform:rotate(45deg);transition:transform .2s ease;margin-right:4px;
}
.lpx-ma-details[open] summary::after{transform:rotate(-135deg)}
.lpx-ma-details[open] summary{border-bottom:1px solid rgba(84,140,146,.12)}
.lpx-ma-list{margin:0;padding:12px 16px 14px 30px;display:flex;flex-direction:column;gap:8px}
.lpx-ma-list li{font-size:13px;color:#444;line-height:1.55}
.lpx-ma-list li b{color:#285260}
.lpx-ma-list--rel a{color:#285260;font-weight:700;text-decoration:none;border-bottom:1.5px solid #B4D7D8}
.lpx-ma-list--rel a:hover{color:#548C92;border-bottom-color:#548C92}

/* Tarjeta AI */
.lpx-ma-ai{
  background:#fafcfc;border:1px solid rgba(84,140,146,.18);
  border-top:2px solid #548C92;border-left:3px solid #548C92;
  border-radius:0 12px 12px 12px;padding:12px 14px;
}
.lpx-ma-ai-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.lpx-ma-ai-title{display:flex;align-items:center;gap:10px;min-width:0}
.lpx-ma-ai-icon{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;
  background:rgba(84,140,146,.08);border:1px solid rgba(84,140,146,.18);
  display:flex;align-items:center;justify-content:center;
}
.lpx-ma-ai-icon img{width:18px;height:18px;object-fit:contain}
.lpx-ma-ai-name{display:flex;flex-direction:column;gap:1px;font-size:13.5px;font-weight:700;color:#1a2a2e}
.lpx-ma-ai-name small{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#aabcc0}
.lpx-ma-ai-pill{
  display:inline-flex;align-items:center;margin-left:6px;
  background:rgba(84,140,146,.10);border:1px solid rgba(84,140,146,.25);
  border-radius:999px;padding:1px 8px;font-size:10px;font-weight:700;letter-spacing:.05em;color:#548C92;
}
.lpx-ma-ai-btn{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  background:#285260;color:#fff;border:none;padding:7px 14px;border-radius:50px;
  font-size:12px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(40,82,96,.2);
  transition:background .2s,box-shadow .2s;
}
.lpx-ma-ai-btn:hover{background:#548C92}
.lpx-ma-ai-btn:disabled{background:#c8cfd0;color:rgba(255,255,255,.85);cursor:not-allowed;box-shadow:none}
.lpx-ma-ai-text{margin:12px 0 0;font-size:13px;line-height:1.65;color:#3a4e55}
.lpx-ma-ai-text b{color:#285260}
.lpx-ma-cargando::after{
  content:"";display:inline-block;width:8px;height:8px;margin-left:6px;border-radius:50%;
  background:#548C92;animation:lpxDot 1s infinite steps(3,end);
}
@keyframes lpxDot{0%,20%{transform:scale(0)}50%{transform:scale(1)}100%{transform:scale(0)}}

@media(max-width:560px){
  .lpx-panel.lpx-wide{width:100vw}
  .lpx-ma-chartWrap{height:210px}
  .lpx-ma-bands,.lpx-ma-bands.lpx-ma-bands--3{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .lpx-panel{transition:none}
  .lpx-ma-toggle i,.lpx-ma-details summary::after{transition:none}
}